<template>
	<div>
		<cl-crud @load="onLoad">
			<template #slot-top-stats>
				<div class="number">
					<div class="money base-flex">
						<div class="money-li" v-for="(item, index) in orderMoney" :key="index">
							<div class="title">{{ item.title }}</div>
							<div class="num">￥{{ item.num }}</div>
							<div class="money-li-child base-flex">
								<div v-for="(itemC, indexC) in item.child" :key="indexC">
									<div class="title">{{ itemC.title }}</div>
									<div class="num">{{ itemC.num }}</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</template>
			<template #slot-top-mask>
				<div class="mask"></div>
			</template>
			<template #slot-datepicker>
				<div class="Filter">
					<el-select
						size="mini"
						filterable
						placeholder="时间筛选"
						v-model="selects.timeType"
						style="margin-right: 10px;width:100px;"
						@change="val => refresh({ timeType: val, page: 1 })"
					>
						<el-option label="创建时间" :value="0"></el-option>
						<el-option label="付款时间" :value="1"></el-option>
						<el-option label="结算时间" :value="2"></el-option>
					</el-select>

					<el-select
						size="mini"
						filterable
						placeholder="帐号筛选"
						v-model="accval"
						style="margin-right: 10px;width:100px;"
						@change="val => refresh({ accountId: val, page: 1 })"
					>
						<el-option value="" label="全部"></el-option>
						<el-option
							v-for="item in accountList"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						></el-option>
					</el-select>

					<el-select
						size="mini"
						filterable
						placeholder="类目筛选"
						v-model="category"
						style="margin-right: 10px;width:100px;"
						@change="val => refresh({ floorId: val, page: 1 })"
					>
						<el-option value="" label="全部"></el-option>
						<el-option
							v-for="item in categoryFilter"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						></el-option>
					</el-select>

					<date-picker
						@change="val => refresh({ startTime: val[0], endTime: val[1], page: 1 })"
						@refresh="refresh({ startTime: '', endTime: '', page: 1 })"
					></date-picker>
					<!-- <el-button
						@click="orderExport"
						type="primary"
						style="margin-left:10px"
						size="mini"
					>
						<i class="el-icon-download"></i>导出报表
					</el-button> -->
				</div>
			</template>
			<template #slot-statuspicker>
				<el-select
					size="mini"
					filterable
					v-model="selects.status"
					placeholder="订单状态"
					style="margin-right: 10px;width:100px;padding-left: 10px;"
					@change="val => refresh({ tkStatus: val, page: 1 })"
				>
					<el-option label="全部订单" value=""></el-option>
					<el-option label="订单结算" :value="3"></el-option>
					<el-option label="订单付款" :value="12"></el-option>
					<el-option label="订单失效" :value="13"></el-option>
					<el-option label="订单成功" :value="14"></el-option>
				</el-select>
			</template>
			<template #table-column-goodInfo="{scope}">
				<goodInfo :item="scope.row"></goodInfo>
			</template>
			<template #table-column-orderCreateTime="{scope}">
				{{ scope.row.orderCreateTime | format_date }}
			</template>
			<template #table-column-orderEarningTime="{scope}">
				{{ scope.row.orderEarningTime | format_date }}
			</template>

			<template #table-column-status="{scope}">
				{{ scope.row.orderStatus | order_status }}
			</template>

			<template #table-column-tkStatus="{scope}">
				<el-tag type="success" v-if="scope.row.tkStatus == 3">订单结算</el-tag>
				<el-tag type="warning" v-else-if="scope.row.tkStatus == 12">订单付款</el-tag>
				<el-tag type="danger" v-else-if="scope.row.tkStatus == 13">订单失效</el-tag>
				<el-tag v-else-if="scope.row.tkStatus == 14">订单成功</el-tag>
			</template>

			<!-- 淘礼金↓ -->
			<template #table-column-tljMoney="{scope}">
				<div>￥{{ scope.row.tljMoney || 0 }}</div>
			</template>

			<template #table-column-tkPaidTime="{scope}">
				<div>
					{{ toStamp(scope.row.tkPaidTime) }}
				</div>
			</template>

			<!-- 商品类目 -->
			<template #table-column-floorId="{scope}">
				<div>
					{{ getType(scope.row.floorId) }}
				</div>
			</template>
		</cl-crud>
	</div>
</template>

<script>
import DatePicker from '@/components/common/date-picker';
import goodInfo from './components/orderList/bwtr-goods-info';
import moment from 'moment';
import platform from '@/mixin/platform';
import { download } from '@/utils/index';
export default {
	data() {
		return {
			accval: '',
			accountList: [],
			categoryFilter: [],
			category: '',
			crud: null,
			orderMoney: [
				{
					title: '销售额',
					num: '0',
					child: [
						{
							title: '全部单数',
							num: '0'
						}
					]
				},
				{
					title: '有效佣金',
					num: '',
					child: [
						{
							title: '有效订单',
							num: ''
						},
						{
							title: '淘礼金金额',
							num: '￥'
						}
					]
				},
				{
					title: '付款佣金',
					num: '0',
					child: [
						{
							title: '付款订单',
							num: '0'
						}
					]
				},
				{
					title: '结算佣金',
					num: '0',
					child: [
						{
							title: '结算订单',
							num: '0'
						}
					]
				},
				{
					title: '失效佣金',
					num: '',
					child: [
						{
							title: '失效订单',
							num: '0'
						}
					]
				}
			],
			selects: {
				timeType: 0,
				isFree: '',
				isTLJ: '',
				status: '',
				source: null
			}
		};
	},
	mounted() {
		// 获取帐号筛选列表
		this.$service.goodsMenagement.getTljAccountList
			.page({
				page: 1,
				size: 100,
				sort: 'desc',
				order: 'createTime'
			})
			.then(res => {
				var temp = res.list;
				var target = [];
				for (var i = 0; i < temp.length; i++) {
					target[i] = { label: temp[i].account, value: temp[i].id };
				}
				this.accountList = target;
			});
		// 获取百万补贴商品分类
		this.$service.goodsMenagement.specialClassify
			.page({
				page: 1,
				size: 60,
				sort: 'asc',
				order: 'level',
				specialType: 100
			})
			.then(res => {
				var temp = res.list;
				var target = [];
				for (var i = 0; i < temp.length; i++) {
					target[i] = { label: temp[i].mainName, value: temp[i].floorId };
				}

				// var str = JSON.stringify(target);
				// str = str.substring(1, str.length - 1);
				// str = '[{"label":"全部", "value":""},' + str + ']';
				this.categoryFilter = target;
			});
	},
	components: {
		DatePicker,
		goodInfo
	},
	mixins: [platform],
	methods: {
		getType(val) {
			// 格式化类目名称
			let arr = (val || '').split(',');
			let category = this.categoryFilter;
			let result = '';
			for (let index = 0; index < arr.length; index++) {
				for (let index_ = 0; index_ < category.length; index_++) {
					if (arr[index] == category[index_].value) {
						result += category[index_].label + ', ';
					}
				}
			}
			result = result.substring(0, result.length - 2);
			return result;
		},
		toStamp(stamps) {
			return moment(stamps).format('YYYY-MM-DD HH:mm:ss');
		},
		orderExport() {
			this.$service.statisticalForm.orderList
				.millionExport(this.params)
				.then(res => {
					console.log(res);
					download({
						data: res,
						fileName: `订单列表-${moment().format('YYYY-MM-DD HH:mm:ss')}`
					});
				})
				.catch(err => {
					console.log(err);
				});
		},
		onLoad({ ctx, app }) {
			this.crud = app;

			ctx.service(this.$service.statisticalForm.pkqOrder)

				.set('dict', {
					label: {
						add: '添加用户'
					}
				})
				.set('dict', {
					api: {
						page: 'pikachuOrders'
					}
				})
				.set('table', {
					columns: [
						{
							label: '序号',
							type: 'index',
							align: 'center',
							width: 80
						},
						// {
						// 	label: '用户名',
						// 	prop: 'nickName',
						// 	align: 'center'
						// },
						{
							label: '商品信息',
							prop: 'goodInfo',
							sortable: 'custom',
							align: 'center',
							width: '550px'
						},
						// {
						// 	label: '订单状态',
						// 	prop: 'status',
						// 	align: 'center'
						// },
						// {
						// 	label: '创建时间',
						// 	prop: 'orderCreateTime',
						// 	align: 'center',
						// 	sortable: 'custom',
						// 	'min-width': 150
						// },
						// {
						// 	label: '结算时间',
						// 	prop: 'orderEarningTime',
						// 	align: 'center',
						// 	sortable: 'custom',
						// 	'min-width': 150
						// },
						// {
						// 	label: '佣金比例/返利比例',
						// 	prop: 'proportion',
						// 	align: 'center',
						// 	'min-width': 150
						// },
						// {
						// 	label: '佣金/返利佣金',
						// 	prop: 'commission',
						// 	align: 'center'
						// },
						{
							label: '推广位',
							prop: 'adzoneId',
							align: 'center',
							sortable: 'custom'
						},
						{
							label: '推广位名称',
							prop: 'adzoneName',
							align: 'center',
							sortable: 'custom',
							'min-width': 150
						},
						{
							label: '淘礼金金额',
							prop: 'tljMoney',
							align: 'center'
						},
						{
							label: '结算佣金',
							prop: 'pubShareFee',
							align: 'center',
							sortable: 'custom'
						},
						{
							label: '预估佣金',
							prop: 'pubSharePreFee',
							align: 'center'
						},
						// {
						// 	label: '订单活动类型',
						// 	prop: 'orderType',
						// 	align: 'center',
						// 	'min-width': 150
						// },
						{
							label: '订单编号',
							prop: 'tradeId',
							align: 'center'
						},
						{
							label: '订单状态',
							prop: 'tkStatus',
							align: 'center'
						},
						{
							label: '联盟账号',
							prop: 'account',
							align: 'center'
						}
					],

					op: {
						visible: false
					},
					props: {
						// 'default-sort': {
						// 	prop: 'orderCreateTime',
						// 	order: 'descending'
						// }
					}
				})

				.set('layout', [
					['slot-top-stats'],
					['slot-top-mask'],
					['refresh-btn', 'flex1', 'search-key'],
					['slot-statuspicker', 'slot-datepicker'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('refresh', async (params, { next }) => {
					this.params = params;
					if (params.isFree === ' ') {
						delete params.isFree;
					}
					if (params.isTLJ === ' ') {
						delete params.isTLJ;
					}
					var order = params.order;
					if (order == null) order = 'tkPaidTime';
					if (order == 'goodInfo') order = 'tkCreateTime';
					const { subData } = await next({
						...params,
						order: order,
						sort: params.sort
					});
					this.orderMoney[0].num = subData.orderAmount;
					this.orderMoney[0].child[0].num = subData.orderNum;

					this.orderMoney[1].num = subData.validCommission.toFixed(2);
					// this.orderMoney[1].child[0].num = `￥${subData.validCommission.toFixed(2)}`;
					this.orderMoney[1].child[0].num = subData.validOrderNum;

					// 淘礼金统计↓
					this.orderMoney[1].child[1].num = '￥' + subData.tljMoney || 0; // 金额

					this.orderMoney[2].num = subData.payCommission.toFixed(2);
					// this.orderMoney[2].child[0].num = `￥${subData.payCommission.toFixed(2)}`;
					this.orderMoney[2].child[0].num = subData.payOrderNum;
					this.orderMoney[3].num = subData.settleCommission.toFixed(2);
					// this.orderMoney[3].child[0].num = `￥${subData.settleCommission.toFixed(2)}`;
					this.orderMoney[3].child[0].num = subData.settleOrderNum;

					this.orderMoney[4].num = subData.invalidCommission.toFixed(2);
					this.orderMoney[4].child[0].num = subData.invalidOrderNum;
				})
				.done();

			app.refresh({
				// prop: 'orderCreateTime',
				// order: 'desc',
				startTime: moment().format('YYYY-MM-DD 00:00:00'),
				endTime: moment().format('YYYY-MM-DD 23:59:59')
			});
		},
		refresh(params) {
			this.crud.refresh(params);
		}
	}
};
</script>
<style lang="scss" scoped>
.number {
	width: 100%;
	background: #ffffff;
	padding: 20px;
	border-radius: 8px;
	.money {
		display: flex;
		justify-content: space-between;
		.money-li {
			flex: 1;
			position: relative;
			left: 70px;
			.money-li-child {
				.num {
					color: $main-light;
					font-size: $font16;
					margin-top: 5px;
				}
				margin-top: 18px;
			}
			.money-li-child div:first-child {
				margin-right: 30px;
			}
			.title {
				color: $text-grey;
				font-size: $font12;
			}
			.num {
				color: $main-light;
				font-size: $font22;
				font-weight: bold;
				margin-top: 6px;
			}
		}
	}
}
.mask {
	width: 100%;
	height: 10px;
	background: $bg-grey;
}
.Filter {
	margin-right: 10px;
	.title {
		margin-right: 10px;
		font-size: $font14;
		color: #666;
	}
}
.tips {
	color: #f14d27;
}
</style>

<style lang="stylus" scoped>
// 格式化crud
.cl-crud {
	padding: 0;

	>>>.el-row.el-row--2 {
		padding: 0 10px;
	}

	>>>.crud-data-table {
		padding: 0 10px;
	}

	>>>.el-row:last-child {
		padding: 0 10px;
	}
}
</style>
